<template>
  <div>
    <div class="item_box">
      <div class="flex_sb mb10">
        <p class="title_1">概要信息</p>
        <el-button plain type="primary" @click="custVisible=true">查询</el-button>
      </div>
      <el-form ref="baseFormRef" class="custom-form" :model="projectData" label-width="180px">
        <el-row>
          <el-col :span="8">
              <el-form-item label="客户名称" prop="custName">
                  <el-input v-model="projectData.custName" />
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件类型" prop="certType">
              <el-select
                v-model="projectData.certType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in certTypeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="证件号码" prop="certNo">
                  <el-input v-model="projectData.certNo" />
              </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="item_box">
      <!-- 基本信息 -->
      <p class="title_1 mb10">基本信息</p>
      <el-form ref="baseFormRef" class="custom-form" :model="projectData" label-width="180px">
        <el-row>
          <el-col :span="8">
              <el-form-item label="项目号" prop="projectCode">
                  <el-input v-model="projectData.projectCode" disabled/>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目简介" prop="projectIntro" disabled>
              <el-input v-model="projectData.projectIntro" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="是否总公司授权" prop="isEmpower" disabled>
                <el-select
                  v-model="projectData.isEmpower"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="dict in isEmpowerOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="项目名称" prop="projectName">
                <el-input v-model="projectData.projectName" />
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目分类" prop="projectType">
              <el-select
                v-model="projectData.projectType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in projectTypeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="项目开始时间" prop="startTime">
                <el-date-picker
                  v-model="projectData.startTime"
                  type="date"
                  placeholder="请选择"
                />
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="项目结束时间" prop="endTime">
                <el-date-picker
                  v-model="projectData.endTime"
                  type="date"
                  placeholder="请选择"
                />
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="项目创建人" prop="projectCreator">
                  <el-input v-model="projectData.projectCreator" disabled/>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="新转续" prop="newRenewal">
              <el-select
                v-model="projectData.newRenewal"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in newRenewalOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="本年度保费规模（万元）" prop="clientPremiumScope">
                  <el-input v-model="projectData.clientPremiumScope">
                    <template #append>万元</template>
                  </el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="投标日期" prop="bidDate">
                <el-date-picker
                  v-model="projectData.bidDate"
                  type="date"
                  placeholder="请选择"
                />
              </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item label="与我司合作历史" prop="collaborationHistory">
                <el-input v-model="projectData.collaborationHistory" :rows="2" type="textarea"/>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合作关系评估" prop="hzgxpg">
              <el-select
                v-model="projectData.hzgxpg"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in hzgxpgOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="经济公司" prop="economicCompany">
                <el-input v-model="projectData.economicCompany"/>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="客户预算" prop="budget">
                  <el-input v-model="projectData.budget">
                    <template #append>万元</template>
                  </el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户期望安排方式" prop="khqwapfs">
              <el-select
                v-model="projectData.khqwapfs"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in khqwapfsOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投标授权主体" prop="bidEmpowerSubject">
              <el-select
                v-model="projectData.bidEmpowerSubject"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in bidEmpowerSubjectOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item label="项目概况简介" prop="overview">
                <el-input v-model="projectData.overview" :rows="2" type="textarea"/>
              </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item label="其他参与公司" prop="otherParticipatingOrg">
                <el-input v-model="projectData.otherParticipatingOrg" :rows="2" type="textarea"/>
              </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item label="竞争对手现状" prop="jzdsxz">
                <el-input v-model="projectData.jzdsxz" :rows="2" type="textarea"/>
              </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item label="我司目标与策略" prop="wsmbycl">
                <el-input v-model="projectData.wsmbycl" :rows="2" type="textarea"/>
              </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件" prop="fileIds">
                <file-upload
                    v-model="projectData.fileIds"
                    :fileType="['pdf','jpg','png','jepg','doc','docx', 'xls', 'xlsx','pptx','ppt']"
                ></file-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="item_box">
      <!-- 项目要素 -->
      <p class="title_1 mb10">项目要素</p>
      <el-form ref="baseFormRef" class="custom-form" :model="projectData" label-width="180px">
        <el-row>
          <el-col :span="8">
              <el-form-item label="预计总保费" prop="yjzbf">
                  <el-input v-model="projectData.yjzbf">
                    <template #append>万元</template>
                  </el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="目标保费" prop="mbbf">
                  <el-input v-model="projectData.mbbf">
                    <template #append>万元</template>
                  </el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="目标份额" prop="mbfe">
                  <el-input v-model="projectData.mbfe" disabled>
                    <template #append>%</template>
                  </el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="车辆规模" prop="clgm">
                  <el-input v-model="projectData.clgm"/>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="预计报价/谈判日期" prop="yjbjtprq">
                <el-date-picker
                  v-model="projectData.yjbjtprq"
                  type="date"
                  placeholder="请选择"
                />
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="历史赔付率" prop="lspfl">
                  <el-input v-model="projectData.lspfl">
                    <template #append>%</template>
                  </el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="主要车辆类型" prop="zycllx">
              <el-select
                v-model="projectData.zycllx"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in zycllxOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目类型" prop="projectType2">
              <el-select
                v-model="projectData.projectType2"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in projectType2Options"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item label="涉及险种" prop="sjxz">
                <el-checkbox-group v-model="projectData.sjxz">
                  <el-checkbox :label="_checkbox.label" :value="_checkbox.value" v-for="_checkbox in sjxzOptions" :key="_checkbox.value"/>
                </el-checkbox-group>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务渠道" prop="ywqd">
              <el-select
                v-model="projectData.ywqd"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in ywqdOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="预计分出比例" prop="yjfcbl">
                  <el-input v-model="projectData.yjfcbl">
                    <template #append>%</template>
                  </el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="预计分出金额" prop="yjfcje">
                  <el-input v-model="projectData.yjfcje">
                    <template #append>万元</template>
                  </el-input>
              </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item label="备注" prop="notes">
                <el-input v-model="projectData.notes" :rows="2" type="textarea"/>
              </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="item_box">
      <!-- 业务联络 -->
      <p class="title_1 mb10">业务联络</p>
      <!-- 司内联系人 -->
      <SnContacts/>
      <!-- 客户联系人 -->
      <CustomContacts/>
      <!-- 经纪公司联系人 -->
      <BrokerageAgency/>
    </div>

    <el-row justify="center">
        <el-button icon="Back" @click="backPage">取消</el-button>
        <el-button type="primary" icon="Wallet" @click="submit">保存</el-button>
        <el-button type="primary" icon="Position" @click="submit">提交审批</el-button>
    </el-row>

    <!-- 选择客户联系人 -->
    <CustomContactsDialog v-model:visible="custVisible" @confirm="selectionCust"/>
  </div>
</template>
  
<script setup>
import SnContacts from './components/SnContacts.vue'
import CustomContacts from './components/CustomContacts.vue'
import BrokerageAgency from './components/BrokerageAgency.vue'
import CustomContactsDialog from '@/views/customer/components/CustomContactsDialog.vue'
import { getCurrentInstance } from 'vue';

const { proxy: vm } = getCurrentInstance()
const router = useRouter();
const props = defineProps({
  pageType: {
    type: String,
    default: false,
  },
})
const { pageType } = toRefs(props)

const isEmpowerOptions = ref([
  { label: '是', value: '1' },
  { label: '否', value: '2' },
])
const newRenewalOptions = ref([
  { label: '是', value: '1' },
  { label: '否', value: '2' },
])
const hzgxpgOptions = ref([
  { label: '是', value: '1' },
  { label: '否', value: '2' },
])
const khqwapfsOptions = ref([
  { label: '是', value: '1' },
  { label: '否', value: '2' },
])
const zycllxOptions = ref([
  { label: '是', value: '1' },
  { label: '否', value: '2' },
])
const projectType2Options = ref([
  { label: '是', value: '1' },
  { label: '否', value: '2' },
])
const ywqdOptions = ref([
  { label: '是', value: '1' },
  { label: '否', value: '2' },
])
const projectTypeOptions = ref([
  { label: '可续保', value: '1' },
  { label: '不可续保', value: '2' },
])
const bidEmpowerSubjectOptions = ref([
  { label: '可续保', value: '1' },
  { label: '不可续保', value: '2' },
])
const certTypeOptions = ref([
  { label: '统一社会信用代码', value: '1' },
  { label: '组织机构代码', value: '2' },
])
const sjxzOptions = ref([
  {label: '企业财产险', value: '1'},
  {label: '家庭财产险', value: '2'},
  {label: '工程险', value: '3'},
  {label: '货物运输保险', value: '4'},
  {label: '船舶保险', value: '5'},
  {label: '特殊风险', value: '6'},
  {label: '农业保险', value: '7'},
  {label: '人身意外保险', value: '8'},
  {label: '建筑工程团意险', value: '9'},
  {label: '短期健康保险', value: '10'},
  {label: '责任保险', value: '11'},
  {label: '信用保险', value: '12'},
  {label: '保证保险', value: '13'},
  {label: '车险', value: '14'},
  {label: '其他', value: '15'}
])
const projectData = reactive({
  custName: '',
  certType: '',
  certNo: '',
  projectCode: '',
  projectIntro: '',
  isEmpower: '',
  startTime: '',
  endTime: '',
  projectCreator: '',
  newRenewal: '',
  clientPremiumScope: '',
  bidDate: '',
  collaborationHistory: '',
  hzgxpg: '',
  economicCompany: '',
  budget: '',
  khqwapfs: '',
  overview: '',
  otherParticipatingOrg: '',
  jzdsxz: '',
  wsmbycl: '',
  fileIds: '',
  yjzbf: '',
  mbbf: '',
  mbfe: '',
  clgm: '',
  yjbjtprq: '',
  lspfl: '',
  zycllx: '',
  projectType2: '',
  sjxz: [],
  ywqd: '',
  yjfcbl: '',
  yjfcje: '',
  notes: '',
})
// 选择客户逻辑-start
const custVisible = ref(false)
const selectionCust = data => {
  console.log('已选择的客户', data);
};

// 选择客户逻辑-end
// 返回
const backPage = () => {
  vm.$tab.closeOpenPage()
  router.back()
};
// 提交、保存
const submit = () => {
  vm.$modal.msgSuccess("提交成功");
  backPage()
};



</script>

<style lang="scss" scoped>
.title_1{
  margin-bottom: 0;
}
.mb10{
  margin-bottom: 10px;
}
</style>